import React from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends React.Component {
  state = {
    todos: [
      { id: 123, name: "吃饭", isDone: false },
      { id: 124, name: "睡觉", isDone: true },
      { id: 125, name: "打豆豆", isDone: false },
    ],
  };
  addTodo = (newTodo) => {
    let newTodos = [newTodo, ...this.state.todos];
    this.setState({ todos: newTodos });
  };
  updateTodo = (id, isDone) => {
    let { todos } = this.state;
    const newTodos = todos.map((todo) => {
      return todo.id === id ? { ...todo, isDone: isDone } : todo;
    });
    this.setState({ todos: newTodos });
  };
  deleteTodo = (id) => {
    let { todos } = this.state;
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });
    this.setState({ todos: newTodos });
  };
  checkAllTodo = (isDone) => {
    let { todos } = this.state;
    const newTodos = todos.map((todo) => {
      return { ...todo, isDone };
    });
    console.log("isDone", isDone);
    this.setState({ todos: newTodos });
  };
  clearAllDone = () => {
    let { todos } = this.state;
    const newTodos = todos.filter((todo) => {
      return !todo.isDone;
    });
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div id="root">
        <div className="todo-container">
          <div className="todo-wrap">
            <Header addTodo={this.addTodo} />
            <List
              todos={todos}
              updateTodo={this.updateTodo}
              deleteTodo={this.deleteTodo}
            />
            <Footer
              todos={todos}
              checkAllTodo={this.checkAllTodo}
              clearAllDone={this.clearAllDone}
            />
          </div>
        </div>
      </div>
    );
  }
}
